<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
    		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>机器人报名</title>
		<script src="js/mui.min.js"></script>
    		<link href="css/mui.min.css" rel="stylesheet"/>
	</head>
	<body>
			<header  class="mui-bar mui-bar-nav">
				<a href="javascript:history.back(-1)" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title">报名队伍</h1>
			</header>
			<div class="mui-content">
				<form id="teamInfo" class="mui-input-group">
					<div class="mui-input-row">
						<label>分类</label>
						<input type="hidden" name="projectId">
						<input type="text" name="projectName" value="" disabled>
						<!--<select name="group_type">-->
							<!--<option value="">请选择</option>-->
						<!--</select>-->
					</div>
					<div class="mui-input-row">
						<label>组别</label>
						<input type="hidden" name="projectClassEnum">
						<input type="text" name="projectClassName" value="" disabled>
						<!--<select name="group_class">-->
							<!--<option value="item-1">请选择</option>-->
						<!--</select>-->
					</div>
					<div class="mui-input-row">
						<label>队名</label>
						<input  name="teamName" type="text" class="mui-input-clear mui-input" placeholder="请输入队名">
						
					</div>
					<div class="mui-card-content-inner" style="font-size: 12px;color: #fb6f73;">
						代表队名称不能含有阿拉伯数字，如：领越科教1队，正确的格式为：领越科教一队
					</div>
					<div class="team-member-list">

					</div>
					<div class="team-teacher-list">

					</div>
					<!--<ul class="mui-table-view teamMember">
			            <li class="mui-table-view-divider">队员一 <span class="mui-badge mui-badge-danger mui-pull-right" style="margin-right: 10px">删除</span></li>
			            <li class="mui-input-row">
				            <label>姓名</label>
							<input name="name"  type="text" class="mui-input-clear mui-input" placeholder="请输入姓名">
			            </li>
			            <li class="mui-input-row">
				            	<label>性别</label>
							<select name="sex" >
								<option value="">请选择</option>
								<option value="1">男</option>
								<option value="0">女</option>
							</select>
			            </li>
			            <li class="mui-input-row">
				            	<label>身份证号</label>
							<input name="idCard" type="text" class="mui-input-clear mui-input" placeholder="请输入身份证号">
			            </li>
			            <li class="mui-input-row">
				            	<label>队服尺码</label>
							<select name="size">
								<option value="">请选择</option>
								<option value="0">S（140-155）</option>
								<option value="1">M（155-170）</option>
								<option value="3">XL（170-185）</option>
								<option value="4">XXXL（185以上）</option>
							</select>
			           </li>
			           <li class="mui-input-row">
				            	<label>所属学校</label>
							<input name="school" type="text" class="mui-input-clear mui-input" placeholder="请输入学校全称">
			           </li>
			        </ul>-->

			        <!--<ul class="mui-table-view">-->
			            <!--<li class="mui-table-view-divider">辅导老师一</li>-->
			            <!--<li class="mui-input-row">-->
				            	<!--<label>姓名</label>-->
							<!--<input  type="text" class="mui-input-clear mui-input" placeholder="请输入姓名">-->
			           <!--</li>-->
			            <!--<li class="mui-input-row">-->
				            	<!--<label>电话</label>-->
							<!--<input id='account' type="text" class="mui-input-clear mui-input" placeholder="请输入电话1">-->
			           <!--</li>-->
			        <!--</ul>-->
					<input type="hidden" name="teamId">
			        <div class="mui-content-padded" style="padding-bottom: 30px;">
		        			<button id="subTeam" type="button" class="mui-btn mui-btn-primary mui-btn-block" style="padding: 6px 12px;">确认</button>
		        		</div>
				</form>
			
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/jquery-1.9.1.min.js"></script>
		<script type="text/javascript">

			mui.ready(function(){
				var id = localStorage.getItem("teamId");//获得队伍id
				var team;
				//获取分类信息
			  // $.ajax({
		      //        type: "post",
		      //        url: "../team/front/getProjectList",
		      //        dataType: "json",
				//      async:false,
		      //        success: function(data){
				// 		 console.log(data);
				// 		 $("select[name=group_type]").empty();
				// 		 var html='<option value="">请选择</option>';
				// 		 $.each(data.data,function(i,e){
				// 		 	html+='<option value='+e.id+'>'+e.name+'</option>';
				// 		 })
				// 		 $("select[name=group_type]").html(html);
		      //                },
              //     error:function(){
              //     	mui.toast('获取队伍信息出现异常，请联系管理员',{ duration:'2000', type:'div' });
              //     }
		      //    });
			  // //获取组别信息
				// $("body").on("change",$("select[name=group_type]"),function () {
				// 	$.ajax({
				// 		type: "post",
				// 		url: "../team/front/getProjectClassList",
				// 		data:{"projectId":$("select[name=group_type]").val()},
				// 		dataType: "json",
				// 		async:false,
				// 		success: function(data){
				// 			console.log(data);
				// 			$("select[name=group_class]").empty();
				// 			var html='<option value="">请选择</option>';
				// 			$.each(data.data,function(i,e){
				// 				html+='<option value='+e.projectClassEnum+'>'+e.name+'</option>';
				// 			})
				// 			$("select[name=group_class]").html(html);
				// 		},
				// 		error:function(){
				// 			mui.toast('获取队伍信息出现异常，请联系管理员',{ duration:'2000', type:'div' });
				// 		}
				// 	});
				// });
				//获取队伍信息
			  $.ajax({
		             type: "post",
		             url: "../team/front/getTeamById",
		             data: {"teamId":id},
		             dataType: "json",
		             success: function(data){
								console.log(data);
								team=data.data;
						 //回显team数据
						 $("input[name=teamId]").val(team.id);
						 $("input[name=projectId]").val(team.project.id);
						 $("input[name=projectName]").val(team.project.name);
						 $("input[name=projectClassEnum]").val(team.projectClassEnum);
						 $("input[name=projectClassName]").val( team.projectClassEnum == "XIAOXUE" ? "小学组" :(team.projectClassEnum =="CHUZHONG" ?  "初中组" :'高中组'));
						 $("input[name=teamName]").val(team.teamName);
							//队员
						 var teamHtml='';
						$.each(team.teamMembers,function (i,e) {
							teamHtml+='<ul class="mui-table-view teamMember"><input type="hidden" name="id" value="'+e.id+'"><input type="hidden" name="team_id" value="'+team.id+'">' +
									'            <li class="mui-table-view-divider">队员'+(++i)+' <span class="mui-badge mui-badge-danger mui-pull-right member-delete" style="margin-right: 10px">删除</span> </li>' +
									'            <li class="mui-input-row">' +
									'            <label>姓名</label>' +
									'<input name="name"  type="text" class="mui-input-clear mui-input" value="'+e.name+'" placeholder="请输入姓名">' +
									'            </li>' +
									'            <li class="mui-input-row">' +
									'            <label>性别</label>' +
									'<select name="sex" >' +
									'<option value="">请选择</option>' +
									'<option value="1" '+(e.sex==1?"selected":"")+'>男</option>' +
									'<option value="0" '+(e.sex==0?"selected":"")+'>女</option>' +
									'</select>' +
									'            </li>' +
									'            <li class="mui-input-row">' +
									'            <label>身份证号</label>' +
									'<input name="idCard" type="text" class="mui-input-clear mui-input" value="'+e.idCard+'" placeholder="请输入身份证号">' +
									'            </li>' +
									'            <li class="mui-input-row">' +
									'            <label>队服尺码</label>' +
									'<select name="size">' +
									'<option value="">请选择</option>' +
									'<option value="S" '+(e.size=="S"?"selected":"")+'>S（140-155）</option>' +
									'<option value="M" '+(e.size=="M"?"selected":"")+'>M（155-170）</option>' +
									'<option value="XL" '+(e.size=="XL"?"selected":"")+'>XL（170-185）</option>' +
									'<option value="XXXL" '+(e.size=="XXXL"?"selected":"")+'>XXXL（185以上）</option>' +
									'</select>' +
									'           </li>' +
									'           <li class="mui-input-row">' +
									'            <label>所属学校</label>' +
									'<input name="school" type="text" class="mui-input-clear mui-input" value="'+e.school+'" placeholder="请输入学校全称">' +
									'           </li>' +
									'        </ul>'
						});
						 $(".team-member-list").append(teamHtml);
						 //判断队员人数且是否可加
						 var countMember=$(".teamMember").length;
						 if(team.jiaoFei==null&&countMember<team.project.teamMemberCount){
							 $(".team-member-list").append('<div class="mui-content-padded" >' +
									 '        <button id="addTeamMember" type="button" class="mui-btn mui-btn-success mui-btn-block" style="padding: 6px 12px;">添加新队员</button>' +
									 '        </div>');
						 }
						//辅导老师
						 var teacherHtml='';
						 $.each(team.teamLeaders,function (i,e) {
							teacherHtml+='<ul class="mui-table-view teamTeacher"><input type="hidden" name="id" value="'+e.id+'"> <input type="hidden" name="team_id" value="'+team.id+'">' +
									'            <li class="mui-table-view-divider">辅导老师'+(++i)+'<span class="mui-badge mui-badge-danger mui-pull-right teacher-delete" style="margin-right: 10px">删除</span> </li>' +
									'            <li class="mui-input-row">' +
									'            <label>姓名</label>' +
									'<input name="name" type="text" class="mui-input-clear mui-input" value="'+e.name+'" placeholder="请输入姓名">' +
									'           </li>' +
									'            <li class="mui-input-row">' +
									'            <label>电话</label>' +
									'<input name="phone" id=\'account\' type="text" class="mui-input-clear mui-input" value="'+e.phone+'" placeholder="请输入电话1">' +
									'           </li>' +
									'        </ul>'
						 });
						 $(".team-teacher-list").append(teacherHtml);
						//判断辅导老师人数且是否可加
						 if(team.jiaoFei==null&&$(".teamTeacher").length<2){
							 $(".team-teacher-list").append('<div class="mui-content-padded" >' +
									 '        <button id="addTeamTeacher" type="button" class="mui-btn mui-btn-success mui-btn-block" style="padding: 6px 12px;">添加新辅导老师</button>' +
									 '        </div>');
						 }
		                     },
                  error:function(){
                  	mui.toast('获取队伍信息出现异常，请联系管理员',{ duration:'2000', type:'div' });
                  }
		         });

			//提交编辑信息
			mui(".mui-content-padded").on('tap','#subTeam',function(){
				var that=this;
				mui(this).button('loading');
				var teamMember=[];
				$.each($(".teamMember"),function (i,e) {
					var obj={};
					if($(this).find("input[name=name]").val()!=""){
						obj["id"]=$(this).find("input[name=id]").val();
						obj["name"]=$(this).find("input[name=name]").val();
						obj["sex"]=$(this).find("select[name=sex]").val();
						obj["idCard"]=$(this).find("input[name=idCard]").val();
						obj["size"]=$(this).find("select[name=size]").val();
						obj["school"]=$(this).find("input[name=school]").val();
						obj["isDelete"]=$(this).find("input[name=isDelete]").val();
						var teamObj={
							"id":$(this).find("input[name=team_id]").val()
						};
						obj["team"]=teamObj;
						teamMember.push(obj);
					}
				});
				var teamTeacher=[];
				$.each($(".teamTeacher"),function (i,e) {
					var obj={};
					if($(this).find("input[name=name]").val()!="") {
						obj["id"]=$(this).find("input[name=id]").val();
						obj["name"] = $(this).find("input[name=name]").val();
						obj["phone"] = $(this).find("input[name=phone]").val();
						obj["isDelete"]=$(this).find("input[name=isDelete]").val();
						var teamObj={
							"id":$(this).find("input[name=team_id]").val()
						};
						obj["team"]=teamObj;
						teamTeacher.push(obj);
					}
				});
				// var editTeamRequestDto =[];
				// editTeamRequestDto.push({"teamId":$("input[name=teamId]").val()})
				// editTeamRequestDto.push({"members":teamMember});
				// editTeamRequestDto.push({"leaders":teamTeacher});
				// console.log(editTeamRequestDto);
				// console.log(JSON.stringify(editTeamRequestDto));
				var editTeamRequestDto ={
					"teamId":$("input[name=teamId]").val(),
					"members":teamMember,
					"leaders":teamTeacher
				};
				console.log(editTeamRequestDto);
				console.log(JSON.stringify(editTeamRequestDto));
			  $.ajax({
		             type: "post",
				  	 contentType:"application/json",
		             url: "../team/front/modifyMember",
		             data: JSON.stringify(editTeamRequestDto),
		             dataType: "json",
		             success: function(data){
						 if(data.success){
							window.location.reload();
						 }else{
							 mui.toast(data.message,{ duration:'2000', type:'div' });
						 }
						 mui(that).button('reset');
		                     },
                  error:function(){
                  	mui.toast('修改队伍信息出现异常，请联系管理员',{ duration:'2000', type:'div' });
                  }
		         });
				});
			//添加新队员操作
				mui(".team-member-list").on('click','#addTeamMember',function(){
					var html='<ul class="mui-table-view teamMember"> <input type="hidden" name="team_id" value="'+team.id+'">' +
							'            <li class="mui-table-view-divider">队员'+($(".teamMember").length+1)+'<span class="mui-badge mui-badge-danger mui-pull-right member-delete" style="margin-right: 10px">删除</span></li>' +
							'            <li class="mui-input-row">' +
							'            <label>姓名</label>' +
							'<input name="name"  type="text" class="mui-input-clear mui-input" placeholder="请输入姓名">' +
							'            </li>' +
							'            <li class="mui-input-row">' +
							'            <label>性别</label>' +
							'<select name="sex" >' +
							'<option value="">请选择</option>' +
							'<option value="1">男</option>' +
							'<option value="0">女</option>' +
							'</select>' +
							'            </li>' +
							'            <li class="mui-input-row">' +
							'            <label>身份证号</label>' +
							'<input name="idCard" type="text" class="mui-input-clear mui-input" placeholder="请输入身份证号">' +
							'            </li>' +
							'            <li class="mui-input-row">' +
							'            <label>队服尺码</label>' +
							'<select name="size">' +
							'<option value="">请选择</option>' +
							'<option value="0">S（140-155）</option>' +
							'<option value="1">M（155-170）</option>' +
							'<option value="3">XL（170-185）</option>' +
							'<option value="4">XXXL（185以上）</option>' +
							'</select>' +
							'           </li>' +
							'           <li class="mui-input-row">' +
							'            <label>所属学校</label>' +
							'<input name="school" type="text" class="mui-input-clear mui-input" placeholder="请输入学校全称">' +
							'           </li>' +
							'        </ul>';
					if($(".teamMember").length<team.project.teamMemberCount){
						$(".team-member-list").find(".teamMember:last").append(html);
					}else{
						mui.toast('已到最大队员数量',{ duration:'2000', type:'div' });
						$(this).parent().remove();
					}
				});
				//添加辅导老师操作
				mui(".team-teacher-list").on('click','#addTeamTeacher',function(){
					var html='<ul class="mui-table-view teamTeacher"> <input type="hidden" name="team_id" value="'+team.id+'">' +
							'            <li class="mui-table-view-divider">辅导老师'+($(".teamTeacher").length+1)+'<span class="mui-badge mui-badge-danger mui-pull-right teacher-delete" style="margin-right: 10px">删除</span></li>' +
							'            <li class="mui-input-row">' +
							'            <label>姓名</label>' +
							'<input name="name" type="text" class="mui-input-clear mui-input"  placeholder="请输入姓名">' +
							'           </li>' +
							'            <li class="mui-input-row">' +
							'            <label>电话</label>' +
							'<input name="phone" type="text" class="mui-input-clear mui-input" placeholder="请输入电话1">' +
							'           </li>' +
							'        </ul>';
					if($(".teamTeacher").length<2){
						$(".team-teacher-list").find(".teamTeacher:last").append(html);
					}else{
						mui.toast('已到最大辅导老师数量',{ duration:'2000', type:'div' });
						$(this).parent().remove();
					}
				});
				mui(".team-member-list").on('click','.member-delete',function(){
					var that = this;
					var btnArray = ['否', '是'];
					mui.confirm('是否确认删除？', '温馨提示', btnArray, function(e) {
						if (e.index == 1) {
							if($(that).parent().parent().find("input[name=id]")){
								$.ajax({
									type: "post",
									url: "../team/front/deleteMember",
									data: {"id":$(that).parent().parent().find("input[name=id]").val()},
									dataType: "json",
									async:false,
									success: function(data){
										if(data.success){
											sleep(500);
											$(that).parent().parent().remove();
										}else{
											mui.toast(data.message,{ duration:'2000', type:'div' });
										}
									},
									error:function(){
										mui.toast('删除队员信息出现异常，请联系管理员',{ duration:'2000', type:'div' });
									}
								});

							}
						}
					})

				});
				mui(".team-teacher-list").on('click','.teacher-delete',function(){
					var that = this;
					var btnArray = ['否', '是'];
					mui.confirm('是否确认删除？', '温馨提示', btnArray, function(e) {
						if (e.index == 1) {
							if($(that).parent().parent().find("input[name=id]")){
								$.ajax({
									type: "post",
									url: "../team/front/deleteTeacher",
									data: {"id":$(that).parent().parent().find("input[name=id]").val()},
									dataType: "json",
									success: function(data){
										if(data.success){
											sleep(500);
											$(that).parent().parent().remove();
										}else{
											mui.toast(data.message,{ duration:'2000', type:'div' });
										}
									},
									error:function(){
										mui.toast('删除队员信息出现异常，请联系管理员',{ duration:'2000', type:'div' });
									}
								});
							}
						}
					})
				});

			});
			function sleep(number) {
				var now = new Date();
				var exitTime = now.getTime() + number;
				while (true) {
					now = new Date();
					if (now.getTime() > exitTime)
						return;
				}
			}
		</script>
	</body>
</html>
